<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>厂商、供货商信息</title>
    <!--这里引入页面的样式-->
    <style>
        #manufacturer{
            width: 49%;
            display: inline-block;
        }
        #supplier{
            float: right;
            width: 50%;
        }
        #addbutton{
            margin: 20px 0 0 400px;
        }
        #supAddbutton{
            margin: 20px 0 0 400px;
        }
    </style>
</head>

<!--引入相关的文件-->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<body>
<div id="app">

    <!--厂商信息-->
    <div id="manufacturer">
        <!--查询-->
        <el-form :inline="true" :model="selectData" class="demo-form-inline" id="select">
            <el-form-item label="厂商编号">
                <el-input v-model="selectData.id"></el-input>
            </el-form-item>
            <el-form-item label="厂商名称">
                <el-input v-model="selectData.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="select">查询</el-button>
            </el-form-item>
        </el-form>

        <!--厂商信息表格-->
        <el-table
                :data="tableData"
                height="500"
                border
                id="table">
            <el-table-column
                    prop="manufacturerId"
                    label="厂商编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="manufacturerName"
                    label="厂商名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="manufacturerAddress"
                    label="地址"
                    width="210"
                    :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column
                    prop="manufacturerPhone"
                    label="电话"
                    width="130">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" @click="modify(scope.$index, scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="primary" @click="dialogFormVisible = true" id="addbutton">添加厂商信息</el-button>

        <!--添加厂商信息dialog-->
        <el-dialog title="厂商信息添加" :visible.sync="dialogFormVisible">
            <el-form :model="addData" :rules="rules" ref="addData">
                <el-form-item label="厂商名称" :label-width="formLabelWidth" prop="manufacturerName">
                    <el-input v-model="addData.manufacturerName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="manufacturerAddress">
                    <el-input v-model="addData.manufacturerAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="manufacturerPhone">
                    <el-input v-model="addData.manufacturerPhone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCancel('addData')">取 消</el-button>
                <el-button type="primary" @click="addSure('addData')">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改-->
        <el-dialog title="修改信息" :visible.sync="modifyDialog" width="60%">
            <el-form :model="rowData" :rules="rules" ref="rowData">
                <el-form-item label="厂商编号" label-width="100px">
                    <el-input v-model="rowData.manufacturerId" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="厂商名称" :label-width="formLabelWidth" prop="manufacturerName">
                    <el-input v-model="rowData.manufacturerName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="manufacturerAddress">
                    <el-input v-model="rowData.manufacturerAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="manufacturerPhone">
                    <el-input v-model="rowData.manufacturerPhone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyDialogCancle('rowData')">取 消</el-button>
                <el-button type="primary" @click="modifyDialogSure('rowData')">确 定</el-button>
            </div>
        </el-dialog>

    </div>

    <!--供货商信息-->
    <div id="supplier">
        <!--查询-->
        <el-form :inline="true" :model="supSelectData" class="demo-form-inline" id="supSelect">
            <el-form-item label="供货商编号">
                <el-input v-model="supSelectData.id" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="供货商名称">
                <el-input v-model="supSelectData.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" plain @click="supSelect">查询</el-button>
            </el-form-item>
        </el-form>

        <!--供货商信息表格-->
        <el-table
                :data="supTableData"
                height="500"
                border
                id="supTable">
            <el-table-column
                    prop="supplierId"
                    label="供货商编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="supplierName"
                    label="供货商名称"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="supplierAddress"
                    label="地址"
                    width="210"
                    :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column
                    prop="supplierPhone"
                    label="电话"
                    width="130">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" @click="supModify(scope.$index, scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="primary" @click="supDialogFormVisible = true" id="supAddbutton">添加供货商信息</el-button>

        <!--添加供货商信息dialog-->
        <el-dialog title="供货商信息添加" :visible.sync="supDialogFormVisible">
            <el-form :model="supAddData" :rules="supRules" ref="supAddData">
                <el-form-item label="供货商名称" :label-width="formLabelWidth" prop="supplierName">
                    <el-input v-model="supAddData.supplierName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="supplierAddress">
                    <el-input v-model="supAddData.supplierAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="supplierPhone">
                    <el-input v-model="supAddData.supplierPhone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="supAddCancel('supAddData')">取 消</el-button>
                <el-button type="primary" @click="supAddSure('supAddData')">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改-->
        <el-dialog title="修改信息" :visible.sync="supModifyDialog" width="60%">
            <el-form :model="supRowData" :rules="supRules" ref="supRowData">
                <el-form-item label="供货商编号" label-width="100px">
                    <el-input v-model="supRowData.supplierId" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="供货商名称" :label-width="formLabelWidth" prop="supplierName">
                    <el-input v-model="supRowData.supplierName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="supplierAddress">
                    <el-input v-model="supRowData.supplierAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="supplierPhone">
                    <el-input v-model="supRowData.supplierPhone" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="supModifyDialogCancle('supRowData')">取 消</el-button>
                <el-button type="primary" @click="supModifyDialogSure('supRowData')">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</div>


<script>
    // 创建一个vue的实例对象,里面写那些数据和方法(一个是页面加载完后自动执行的方法，一个是其他操作后执行的代码)
    // 创建 Vue 实例
    new Vue({
        el: '#app',
        data() {
            return {
                selectData: {
                    id: '',
                    name: ''
                },
                tableData: [],
                rowData: [],
                dialogFormVisible: false,
                modifyDialog: false,
                formLabelWidth: '120px',
                addData: {
                    manufacturerName: '',
                    manufacturerPhone: '',
                    manufacturerAddress: ''
                },
                rules: {
                    manufacturerName: [
                        {required: true, message: '请输入厂商名称', trigger: 'blur'}
                    ],
                    manufacturerPhone: [
                        {required: true, message: '请输入电话号码', trigger: 'blur'},
                        {
                            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                            message: '请输入正确的电话号码格式'
                        }
                    ],
                    manufacturerAddress: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ]
                },

                supSelectData: {
                    id: '',
                    name: ''
                },
                supTableData: [],
                supRowData: [],
                supDialogFormVisible: false,
                supModifyDialog: false,
                supAddData: {
                    supplierName: '',
                    supplierPhone: '',
                    supplierAddress: ''
                },
                supRules: {
                    supplierName: [
                        {required: true, message: '请输入供货商名称', trigger: 'blur'}
                    ],
                    supplierPhone: [
                        {required: true, message: '请输入电话号码', trigger: 'blur'},
                        {
                            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                            message: '请输入正确的电话号码格式'
                        }
                    ],
                    supplierAddress: [
                        {required: true, message: '请输入地址', trigger: 'blur'}
                    ]
                },
            }
        },
        methods: {
            select() {
                axios.get('../manufacturer', {
                    params: {
                        op: "findByTrem",
                        manufacturerId: this.selectData.id,
                        manufacturerName: this.selectData.name
                    }
                }).then(resp => {
                    if (resp.data.code == 200) {
                        this.tableData = resp.data.data;
                    } else if (resp.data.code == 600) {
                        this.tableData = resp.data.data;
                    } else {
                        alert("查询失败!" + resp.data.code)
                    }
                });
            },
            //修改
            modify(index, row) {
                console.log("row:::" + row);
                console.log("index:::" + index);
                this.modifyDialog = true;
                this.rowData = row;
            },
            //修改信息取消
            modifyDialogCancle(formName) {
                alert("修改信息取消")
                this.modifyDialog = false;
                this.$refs[formName].resetFields();
            },
            //修改表单数据清空
            modifyClear: function () {
                this.rowData.manufacturerName = '';
                this.rowData.manufacturerAddress = '';
                this.rowData.manufacturerPhone = '';
            },
            //修改信息确认
            modifyDialogSure(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.get('../manufacturer', {
                            params: {
                                op: "update",
                                manufacturerId: this.rowData.manufacturerId,
                                manufacturerName: this.rowData.manufacturerName,
                                manufacturerAddress: this.rowData.manufacturerAddress,
                                manufacturerPhone: this.rowData.manufacturerPhone
                            }
                        }).then(resp => {
                            if (resp.status == 200) {
                                if (resp.data) {
                                    alert("修改成功!");
                                    this.show();
                                } else {
                                    alert("添加失败!");
                                }
                            }
                        });
                        this.modifyDialog = false;
                        this.$refs[formName].resetFields();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //添加取消
            addCancel(formName) {
                this.dialogFormVisible = false;
                this.$refs[formName].resetFields();
                this.addClear();
            },
            //表单数据清空
            addClear: function () {
                this.addData.manufacturerName = '';
                this.addData.manufacturerAddress = '';
                this.addData.manufacturerPhone = '';
            },
            //添加确认
            addSure(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.get('../manufacturer', {
                            params: {
                                op: "add",
                                manufacturerName: this.addData.manufacturerName,
                                manufacturerAddress: this.addData.manufacturerAddress,
                                manufacturerPhone: this.addData.manufacturerPhone
                            }
                        }).then(resp => {
                            if (resp.status == 200) {
                                if (resp.data) {
                                    alert("添加成功!");
                                    this.show();
                                } else {
                                    alert("添加失败!");
                                }
                            }
                        });
                        this.dialogFormVisible = false;
                        this.$refs[formName].resetFields();
                        this.addClear();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            show: async function () {
                await axios.get('../manufacturer', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.tableData = resp.data.data;
                    }
                });
            },

            //供货商
            supSelect() {
                axios.get('../supplier', {
                    params: {
                        op: "findByTrem",
                        supplierId: this.supSelectData.id,
                        supplierName: this.supSelectData.name
                    }
                }).then(resp => {
                    if (resp.data.code == 200) {
                        this.supTableData = resp.data.data;
                    } else if (resp.data.code == 600) {
                        this.supTableData = resp.data.data;
                    } else {
                        alert("查询失败!" + resp.data.code)
                    }
                });
            },
            //修改
            supModify(index, row) {
                console.log("row:::" + row);
                console.log("index:::" + index);
                this.supModifyDialog = true;
                this.supRowData = row;
            },
            //修改信息取消
            supModifyDialogCancle(formName) {
                alert("修改信息取消")
                this.supModifyDialog = false;
                this.$refs[formName].resetFields();
            },
            //修改表单数据清空
            supModifyClear: function () {
                this.supRowData.supplierName = '';
                this.supRowData.supplierAddress = '';
                this.supRowData.supplierPhone = '';
            },
            //修改信息确认
            supModifyDialogSure(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.get('../supplier', {
                            params: {
                                op: "update",
                                supplierId: this.supRowData.supplierId,
                                supplierName: this.supRowData.supplierName,
                                supplierAddress: this.supRowData.supplierAddress,
                                supplierPhone: this.supRowData.supplierPhone
                            }
                        }).then(resp => {
                            if (resp.status == 200) {
                                if (resp.data) {
                                    alert("修改成功!");
                                    this.supShow();
                                } else {
                                    alert("添加失败!");
                                }
                            }
                        });
                        this.supModifyDialog = false;
                        this.$refs[formName].resetFields();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //添加取消
            supAddCancel(formName) {
                this.supDialogFormVisible = false;
                this.$refs[formName].resetFields();
                this.supAddClear();
            },
            //表单数据清空
            supAddClear: function () {
                this.supAddData.supplierName = '';
                this.supAddData.supplierAddress = '';
                this.supAddData.supplierPhone = '';
            },
            //添加确认
            supAddSure(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.get('../supplier', {
                            params: {
                                op: "add",
                                supplierName: this.supAddData.supplierName,
                                supplierAddress: this.supAddData.supplierAddress,
                                supplierPhone: this.supAddData.supplierPhone
                            }
                        }).then(resp => {
                            if (resp.status == 200) {
                                if (resp.data) {
                                    alert("添加成功!");
                                    this.supShow();
                                } else {
                                    alert("添加失败!");
                                }
                            }
                        });
                        this.supDialogFormVisible = false;
                        this.$refs[formName].resetFields();
                        this.supAddClear();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            supShow: async function () {
                await axios.get('../supplier', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.supTableData = resp.data.data;
                    }
                });
            },
            showAll: async function () {
                await axios.get('../manufacturer', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.tableData = resp.data.data;
                    }
                });
                await axios.get('../supplier', {params: {op: "show"}}).then(resp => {
                    if (resp.data.code == 200) {
                        this.supTableData = resp.data.data;
                    }
                });
            }
        },
        mounted() {
            this.showAll();
        }
    });

</script>
<!-- 不用vue的js代码写在下面-->
<script>

</script>
</body>
</html>